<template>
    <div class="live2d-root">
        <canvas class="live2d-canvas" ref="canvasDom"></canvas>

        <!-- <div :style="testCss + 'width:10px;height:10px;position:fixed;background:red;'"></div> -->
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { LAppGlManager } from './tools/lappglmanager.ts'
import { LAppDelegate } from './tools/lappdelegate.ts'
import { LAppLive2DManager } from './tools/lapplive2dmanager.ts'
import { Vector3 } from '@/tools/three.module.js'
import * as LAppDefine from './tools/lappdefine.ts'


const canvasDom = ref();
const testCss = ref();


onMounted(() => {
    createLive();
});

//测试动作
const motion_ClickEvent = () => {
    // const model = LAppLive2DManager.getInstance().getModel(0);
}

const createLive = () => {
    new LAppGlManager(canvasDom.value);
    LAppDelegate.getInstance().initialize();
    LAppDelegate.getInstance().run()

    //鼠标移动事件
    document.body.addEventListener('mousemove', lookAt_MousemoveEvent);
    document.body.addEventListener('click', motion_ClickEvent, true);
}

const lookAt_MousemoveEvent = (e) => {
    e.stopPropagation();

    const curPosi = viewPosiToCanvasPosi(e.clientX, e.clientY);
    LAppDelegate.getInstance()._view.onTouchesMoved(curPosi[0], curPosi[1]);
}


//把鼠标的窗口坐标为转为canvas坐标
const viewPosiToCanvasPosi = (clientX, clientY) => {
    const { width, height } = LAppDefine.CanvasSize;
    const posX = clientX;
    const posY = clientY;
    const w_2 = width / 2;
    const h_2 = height / 2;
    const curPosi = [0, 0];

    const { left, top } = canvasDom.value.getBoundingClientRect();

    //原点归零后的鼠标位置
    const posi = [(posX - (left + w_2)), (posY - (top + h_2)) * -1];
    //判断鼠标是否在canvas内
    if (posi[0] <= w_2 &&
        posi[0] >= -w_2 &&
        posi[1] <= h_2 &&
        posi[1] >= -h_2) {
        curPosi[0] = posi[0];
        curPosi[1] = posi[1];
    } else {
        //判断在那条线上
        let a = 0;
        let arr = [];
        if (posi[0] > 0) {
            arr = [1, 4];
        } else {
            arr = [2, 3];
        }
        if (posi[1] > 0) {
            a = arr.find(u => u == 1 || u == 2)
        } else {
            a = arr.find(u => u == 3 || u == 4)
        }

        const nodes = [];//两条线的三个顶点,逆时针
        if (a == 1) {
            nodes[0] = new Vector3(w_2, -h_2, 0);
            nodes[1] = new Vector3(w_2, h_2, 0);
            nodes[2] = new Vector3(-w_2, h_2, 0);
        } else if (a == 2) {
            nodes[0] = new Vector3(w_2, h_2, 0);
            nodes[1] = new Vector3(-w_2, h_2, 0);
            nodes[2] = new Vector3(-w_2, -h_2, 0);
        } else if (a == 3) {
            nodes[0] = new Vector3(-w_2, h_2, 0);
            nodes[1] = new Vector3(-w_2, -h_2, 0);
            nodes[2] = new Vector3(w_2, -h_2, 0);
        } else if (a == 4) {
            nodes[0] = new Vector3(-w_2, -h_2, 0);
            nodes[1] = new Vector3(w_2, -h_2, 0);
            nodes[2] = new Vector3(w_2, h_2, 0);
        }
        //计算看到那条线更近
        const c = new Vector3(0, 0, 0);
        const orgin = new Vector3(posi[0], posi[1], 0);
        const line1 = lineIntersect(c, orgin, nodes[0], nodes[1]);
        const line2 = lineIntersect(c, orgin, nodes[1], nodes[2]);

        if (new Vector3().distanceTo(line1) > new Vector3().distanceTo(line2)) {
            curPosi[0] = line2.x;
            curPosi[1] = line2.y;
        } else {
            curPosi[0] = line1.x;
            curPosi[1] = line1.y;
        }
    }
    testCss.value = `top:${curPosi[1] * -1 + top + h_2 - 5}px;left:${curPosi[0] + left + w_2 - 5}px;`;
    return [curPosi[0] + w_2, curPosi[1] * -1 + h_2];
}

//方向到边的距离[发射原点,方向,线段点1,线段点2]
const lineIntersect = (p0, p1, p2, p3) => {
    var A1 = p1.y - p0.y,
        B1 = p0.x - p1.x,
        C1 = A1 * p0.x + B1 * p0.y,
        A2 = p3.y - p2.y,
        B2 = p2.x - p3.x,
        C2 = A2 * p2.x + B2 * p2.y,
        denominator = A1 * B2 - A2 * B1;
    return new Vector3((B2 * C1 - B1 * C2) / denominator, (A1 * C2 - A2 * C1) / denominator, 0);
}



</script>

<style lang="scss" scoped>
.live2d-root {
    // background: red;
    pointer-events: none;

    .live2d-canvas {
        pointer-events: none;
    }
}
</style>